@import models.Tables.OrganelleRow
@(row:OrganelleRow)(implicit session: Session)
@organelle = @{
    row.og match {
        case "cp" => "Chloroplast"
        case "mt" => "Mitochondria"
    }
}

@config.main(row.species) {

    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">

    <style>

        td{
            white-space: normal;
        }

        .table td, .table th{
            vertical-align: middle;
            text-align: left;
        }
    </style>
    <div class="body-box">
        <div class="page-box">

            @config.subTitle(row.species, organelle,"/COADB/og/" + row.og + "Page" )


            <div class="main-body">

                    <div style="display: flex">
                    <div style="width: 100%;
                        text-align: center">
                        <table class="table table-bordered">
                            <tbody>
                                <tr><th style="width: 15%">Species</th><td style="width: 25%">@row.species</td><td rowspan="8" style="text-align: center"> <img src="/COADB/og/getOgImage/@{row.accessionId}.png" style="width: 50%"/></td></tr>
                                <tr><th>Accession ID</th><td>@row.accessionId</td></tr>
                                <tr><th>Chinese name</th><td>@row.chinese</td></tr>
                                <tr><th>Size (bp)</th><td>@row.size</td></tr>
                                <tr><th>Conformation</th><td>@row.conformation</td></tr>
                                <tr><th>Institution</th><td>@row.institution</td></tr>
                                <tr><th>Date</th><td>@row.date</td></tr>

                                <tr><th>Download</th><td>
                                    <div><a href="" target="_blank">@{row.accessionId}.gb</a></div>
                                </td></tr>
                                <tr><th>ORGANISM</th><td colspan="2"> Eukaryota; Viridiplantae; Streptophyta; Embryophyta; Tracheophyta;
                                    Spermatophyta; Magnoliopsida; eudicotyledons; Gunneridae;
                                    Pentapetalae; asterids; Ericales; Theaceae; Camellia.</td></tr>
                                <tr><th>Title</th><td colspan="2"> @row.title</td></tr>
                                <tr><th>Author</th><td colspan="2"> @row.author</td></tr>
                                <tr><th>JOURNAL</th><td colspan="2"> @row.journal</td></tr>
                            </tbody>
                        </table>




                    </div>
                </div>
                @components.scrollComponents("Gene info", "basic") {


                    @components.tableComponent("table")
                }
            </div>
        </div>
    </div>
    <script src="@routes.Assets.versioned("config/speciesTable.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>

    <script>

            $(function () {

                let columns = getTableColumns(ogHeader, "table")


                $.post("/arctium/browse/getOrganelleGenome?species", (data) => {
                    $("#table").bootstrapTable({
                        data: data,
                        columns: columns
                    })

                    let hide = ["nrname", "nrdes", "nrsimil", "swissname", "swissdes","swisssimil"]

                    hide.forEach(v => {
                        $('#table').bootstrapTable('hideColumn', v);
                        $("input:checkbox[value=" + v + "]").attr("checked", false)
                    })
                })


            })


    </script>

}